<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { showToast } from 'vant';

import BiPopup from '@/components/bi-popup/index.vue'
import BiBootPopup from '@/components/bi-boot-popup/index.vue'

interface Props {
    cash: number,
    frozen: number
}
const props = withDefaults(defineProps<Props>(), {
    cash: 0, // 已获取金额
    frozen: 0 // 冻结金额
})

const router = useRouter()

const invitedPopup = ref(false)
const openInvitedPopup = () => {
    invitedPopup.value = true
}
const handleToInvited = () => {
    if (props.cash == 0 && props.frozen == 0) {
        showToast('Not sufficient funds!')
        return
    }
    if (props.cash < 1 && props.cash > 0) {
        showToast('Only when the amount ≥ $1 can you withdraw!')
        return
    }
    if (!props.cash && props.frozen > 0) {
        openInvitedPopup()
        return
    }

    const query = {
        amount: props.cash
    }
    router.push({ path: '/invitedInput', query })
}

const showBootPopup = ref(false)
const openBootPopup = () => {
    showBootPopup.value = true
}
const handleToInvitedPage = () => {
    const isAndroid = typeof android !== 'undefined'
    if (isAndroid && android.getAppVersion) {
        router.push('/invited')
    } else {
        openBootPopup()
    }
}

</script>

<template>
    <div class="invited-reward">
        <div class="container">
            <h3 class="title">Invitation Reward</h3>
            <div class="content">
                <div class="content-grid">
                    <div class="content-grid-item">
                        <span class="content-grid-item_title">received</span>
                        <span class="content-grid-item_num">${{ props.cash || 0 }}</span>
                    </div>
                    <div class="content-grid-item">
                        <span class="content-grid-item_title">unreceived</span>
                        <span class="content-grid-item_num un">${{ props.frozen || 0 }}</span>
                    </div>
                    <div class="content-grid-item">
                        <img src="@/assets/imgs/exchange/logo_big.png" alt="paypal_icon" width="70">
                        <div class="content-grid-item_btn" @click="handleToInvited">
                            <span>Exchange</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <BiPopup v-model:show="invitedPopup" type="task" button-text="Invitation rules" @click="handleToInvitedPage">
        <span class="red-text" style="font-size: 3.5vmin;width: 60vmin;line-height: 1.5;text-align: left;font-weight: bold;">Invitees need to complete one withdrawal in order for the reward to be received.Details, please refer to the invitation rules.</span>
    </BiPopup>

    <BiBootPopup v-model:show="showBootPopup" />
</template>

<style scoped lang="scss">
.invited-reward {
    width: 100%;
    padding: 3vmin;
    padding-top: 0;

    .container {
        background-color: var(--exchange-card-color);
        border-radius: 3vmin;
        padding: 2.5vmin 1.2vmin;

        .title {
            display: block;
            width: 100%;
            text-align: center;
            font-size: var(--small-font-size);
            color: #1d1d1f;
            font-weight: bold;
        }

        .content {
            background-color: #ffffff;
            border-radius: 3vmin;
            margin-top: 1vmin;

            &-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-auto-rows: 20vmin;
                padding: 1.5vmin 0;

                &-item {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;
                    align-items: center;

                    &_title {
                        text-align: center;
                        font-size: var(--small-font-size);
                        color: #1d1d1f;
                    }

                    &_num {
                        font-size: var(--middle-font-size);
                        font-weight: bold;
                        color: var(--main-color);

                        &.un {
                            color: #e9764a;
                        }
                    }

                    &_btn {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 90%;
                        height: 7vmin;
                        background-color: var(--main-color);
                        border-radius: 999px;

                        span {
                            font-size: var(--mini-font-size);
                            color: #ffffff;
                        }
                    }

                    &>img {
                        width: 13vmin;
                        object-fit: contain;
                    }
                }
            }
        }
    }
}
</style>